<template>
  <div class="dangtianyewu">
    <div class="dangtianyewuTit">业务概述</div>
    <!-- <div class="dangtianyewuCon">
      <div class="dangtianyewuList">
        <span class="dtywlTit">当天总重量</span>
        <div class="dtywlbili">
          <img src="../../../../static/img/hongjiantou.png" />
          <span>10.9%</span>
        </div>
        <div class="dtywldun">
          <img src="../../../../static/img/yuanzhu.png" />
          <span>{{formatNumberRgx(200)}}吨</span>
        </div>
      </div>
     <div class="dangtianyewuList">
        <span class="dtywlTit">当天总体积</span>
        <div class="dtywlbili">
          <img src="../../../../static/img/hongjiantou.png" />
          <span>15.9%</span>
        </div>
        <div class="dtywldun">
          <img src="../../../../static/img/yuanzhu.png" />
          <span>{{formatNumberRgx(1303)}}方</span>
        </div>
      </div>
      <div class="dangtianyewuList">
        <span class="dtywlTit">当月总重量</span>
        <div class="dtywlbili">
          <img src="../../../../static/img/hongjiantou.png" />
          <span>8%</span>
        </div>
        <div class="dtywldun">
          <img src="../../../../static/img/yuanzhu.png" />
          <span>{{formatNumberRgx(1453)}}吨</span>
        </div>
      </div>
      <div class="dangtianyewuList">
        <span class="dtywlTit">当月总体积</span>
        <div class="dtywlbili">
           <img src="../../../../static/img/hongjiantou.png" />

          <span >12.2%</span>
        </div>
       <div class="dtywldun">
          <img src="../../../../static/img/yuanzhu.png" />
          <span>{{formatNumberRgx(6458)}}方</span>
        </div>
      </div>
    </div> -->
    <div class="dtywConWrapNew">
      <div class="dtyeConLeft">
        <div class="dtyeConLeftListWrap">
          <div class="dtyeConLeftList">
            <div class="dtyeConLeftListTit">
              <img src="../../../../static/img/datianyewu/feiji.png" />
              <span>总重量</span>
            </div>
            <div class="dtyeConLeftListTxt">
              <span>199.90</span>
              <span>吨</span>
            </div>
          </div>
          <div class="dtyeConLeftList">
            <div class="dtyeConLeftListTit">
              <span>总体积</span>
            </div>
            <div class="dtyeConLeftListTxt">
              <span>1303</span>
              <span>方</span>
            </div>
          </div>
        </div>
        <div class="dtyeConLeftListWrap">
          <div class="dtyeConLeftList">
            <div class="dtyeConLeftListTit hColor">
              <img src="../../../../static/img/datianyewu/chengkaban.png" />
              <span>总重量</span>
            </div>
            <div class="dtyeConLeftListTxt hbg">
              <span>170</span>
              <span>吨</span>
            </div>
          </div>
          <div class="dtyeConLeftList">
            <div class="dtyeConLeftListTit hColor">
              <span>总体积</span>
            </div>
            <div class="dtyeConLeftListTxt hbg">
              <span>1108</span>
              <span>方</span>
            </div>
          </div>
        </div>
        <div class="dtyeConLeftListWrap">
          <div class="dtyeConLeftList">
            <div class="dtyeConLeftListTit zColor">
              <img src="../../../../static/img/datianyewu/lunchuan.png" />
              <span>总重量</span>
            </div>
            <div class="dtyeConLeftListTxt zbg">
              <span>2277</span>
              <span>吨</span>
            </div>
          </div>
          <div class="dtyeConLeftList">
            <div class="dtyeConLeftListTit zColor">
              <span>总体积</span>
            </div>
            <div class="dtyeConLeftListTxt zbg">
              <span>14666</span>
              <span>方</span>
            </div>
          </div>
        </div>


      </div>
      <div class="dtyeConRight">
        <div class="echartsClass" ref="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'dangtianyewu',
    components: {

    },
    data() {
      return {

      }
    },
    mounted() {
      this.getEcharts();
    },
    methods: {
      formatNumberRgx(num) {
        var parts = num.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
      },
      getEcharts() {
        const chart = this.$refs.chart;
        if (chart) {
          const myChart = this.$echarts.init(chart)
          var that = this;

          const option = {

            series: [{
              name: '',
              type: 'pie',
              minAngle:50, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
              avoidLabelOverlap: true, //是否启用防止标签重叠策略
              hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果。
              startAngle: 92,
              color: ['#5b329a', '#5f9cb4', '#de7a2c'],
              avoidLabelOverlap: false,
              center: ['50%', '55%'],
              radius: ['30%', '48%'],

              labelLine: {
                length: 3,
                length2: 5,
              },
              label: {
                formatter: '{b|{b}}\n  {per|{d}%}  ',
                rich: {
                  b: {
                    color: '#59eef7',
                    fontSize: 14,
                    fontWeight: 'bold',
                    lineHeight: 20,
                    align: 'center'
                  },
                  per: {
                    color: '#fff',
                    align: 'center'
                  }
                }
              },
              data: [{
                  value: 199.90,
                  name: '飞机'
                },
                {
                  value: 170,
                  name: '卡班'
                },
                {
                  value: 2277,
                  name: '轮船'
                }

              ]
            }]
          };
          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }

      }
    }
  }
</script>

<style scoped>
  .dangtianyewu {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .dangtianyewuTit {
    height: .3rem;
    width: 100%;
    background: url(../../../../static/img/dangtianyewuqingkuang.png) no-repeat;
    /* background-size: 50% 80%; */
    line-height: .3rem;
    font-size: .16rem;
    color: #fff;
    padding: 0 .1rem;
    letter-spacing: 1px;
    margin-bottom: .2rem;
  }

  .dtywConWrapNew {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .dtywConWrapNew>div {
    width: 49%;
    height: 100%;
  }

  .dtyeConLeft {
    /* display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; */

  }

  .dtyeConLeftListWrap {
    width: 100%;
    height: 33.33%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .dtyeConLeftList {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 49%;
    height: 100%;
  }

  .dtyeConLeftListTit {
    height: .28rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* margin-bottom: .05rem; */
  }

  .dtyeConLeftListTit>img {
    transform: scale(.85);
  }

  .dtyeConLeftListTit>span {
    color: #59eef7;
    font-size: .12rem;
  }

  .hColor>span {
    color: #d46931;
  }

  .zColor>span {
    color: #5c70b9;
  }

  .dtyeConLeftListTxt {
    flex: 1;
    width: 100%;
    background: url(../../../../static/img/datianyewu/lanyuanzhu.png) no-repeat center center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .12rem;
    color: #fff;
  }

  .hbg {
    background: url(../../../../static/img/datianyewu/chengyuanzhu.png) no-repeat center center;
  }

  .zbg {
    background: url(../../../../static/img/datianyewu/ziyuanzhu.png) no-repeat center center;
  }

  .dtyeConLeftListTxt>span:nth-of-type(1) {
    font-size: .16rem;
  }

  .echartsClass {
    width: 100%;
    height: 100%;
  }

  /* .dangtianyewuCon{
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .dangtianyewuList{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48%;
    height: 48%;
  }
  .dangtianyewuList:nth-child(1),.dangtianyewuList:nth-child(2){
    margin-bottom: .1rem;
  }
  .dtywlTit{
    font-size: .14rem;
    color: #039bab;
  }
  .dtywlbili{
    display: flex;
    align-items: center;
    justify-content: center;
    height: .22rem;
  }
   .dtywlbili>span{
     font-size: .12rem;
     color: #ed2065;
   }
   .dtywlbili img{

   }
   .dtywlbili>span.color{
     color:  #19b76c;
   }

   .dtywldun{
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .dtywldun img{
      width:80%;
   }
   .dtywldun>span{
     position: absolute;
     left:0 ;
     right: 0;
     top: 0;
     bottom: 0;
     margin: auto;
     font-size: .18rem;
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
   } */
</style>
